<template>
    <view class="news-con">
        <header-vue :back="true" :title="titleList[id]" titleSize="32rpx" titleColor="#333" id="headerH"></header-vue>

        <scroll-view class="scroll-area" scroll-y :style="{ 'height': sH + 'px' }" :refresher-enabled="true"
            :refresher-triggered="refreshing" refresher-background="transparent" @refresherrefresh="onRefresh"
            @scrolltolower="onLoadMore" :lower-threshold="100">

            <view class="list-wrap">
                <view v-for="item in list" :key="item.id" @click="goToDetail(item)">
                    <view class="notification-card" v-if="id != 4">
                        <view class="card-icon" :class="{ show: item.unLook }"></view>
                        <view class="card-content">
                            <view class="card-title">{{ item.title }}</view>
                            <view class="card-desc">{{ item.content }}</view>
                        </view>
                        <view class="card-time">{{ formatTime(item.time) }}</view>
                    </view>
                    <view class="notification-card order" v-else>
                        <view class="card-icon show"></view>
                        <view class="order-box">
                            <view class="order-header">
                                <view class="order-title">{{ item.title }}</view>
                                <view class="order-date">{{ item.time }}</view>
                            </view>
                            <view class="order-body">
                                <image v-if="item.thumb" :src="item.thumb" style="width: 120rpx; height: 120rpx;" mode="aspectFill" class="order-thumb"></image>
                                <view class="order-desc">{{ item.content }}</view>
                            </view>
                            <view class="order-footer">
                                <text class="order-link">查看详情</text>
                                <u-icon name="arrow-right" size="24rpx" color="#2E8AE6"></u-icon>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="load-more" v-if="loading">
                    <u-loading-icon mode="circle" size="24"></u-loading-icon>
                    <text class="load-text">加载中...</text>
                </view>
                <view class="empty" v-if="!loading && list.length === 0">
                    <text class="empty-text">暂无消息</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import headerVue from '@/components/header.vue';

export default {
    components: {
        headerVue
    },
    data() {
        return {
            list: [],
            refreshing: false,
            loading: false,
            page: 1,
            pageSize: 10,
            sH: 0,
            titleList: {
                '1': '平台公告',
                '2': '缴费通知',
                '3': '积分消息',
                '4': '订单通知',
                '5': '审核通知'
            },
            id: 1,
            orderList: []
        }
    },
    onLoad(options) {
        this.id = options.id || 1
        this.loadData()
    },
    mounted() {
        // 获取系统信息计算高度，兼容App端
        const systemInfo = uni.getSystemInfoSync()
        // App端使用screenHeight，H5端使用windowHeight
        const screenHeight = systemInfo.screenHeight || systemInfo.windowHeight
        const statusBarHeight = systemInfo.statusBarHeight || 0

        // 延迟执行确保DOM渲染完成，App端需要更长时间
        setTimeout(() => {
            const q = uni.createSelectorQuery().in(this)
            q.select('#headerH').boundingClientRect()
                .exec(rects => {
                    const headerRect = rects[0]
                    const headerHeight = headerRect ? headerRect.height : 88

                    // App端计算：屏幕高度 - 状态栏 - header
                    const calc = screenHeight - headerHeight

                    this.sH = calc > 0 ? calc : screenHeight - statusBarHeight
                })
        }, 200) // App端需要更长的延迟
    },
    methods: {
        loadData() {
            this.loading = true
            setTimeout(() => {
                let mockData = this.id == '4' ? this.getOrderData() : this.getMockData()
                this.list = mockData
                this.loading = false
            }, 500)
        },
        getOrderData() {
            const now = new Date()
            return [
                { id: 401, title: '订单已支付通知', content: '你购买的商品【新鲜甜口奶枣250g*2条/份】已支付，点击查看详...', time: '2025-9-11 14:13', unLook: true, thumb: 'https://cdn.uviewui.com/uview/swiper/1.jpg' },
                { id: 402, title: '订单已支付通知', content: '你购买的服务空调清洗维护已支付，点击查看详...', time: '2025-9-11 14:13', unLook: false, thumb: 'https://cdn.uviewui.com/uview/swiper/2.jpg' },
                { id: 403, title: '订单已支付通知', content: '你购买的服务精品家政保洁2小时套餐已支付，点击查看详...', time: '2025-9-11 14:13', unLook: false, thumb: 'https://cdn.uviewui.com/uview/swiper/3.jpg' }
            ]
        },
        getMockData() {
            const now = new Date()
            return [
                {
                    id: 1,
                    title: '平台公告',
                    content: '公告内容内容内容内容内容内容内容内容',
                    time: new Date(now.getTime() - 30 * 1000), // 30秒前
                    unLook: true,
                },
                {
                    id: 2,
                    title: '缴费通知',
                    content: '您的2025年度物业账单已产生,请尽快完...',
                    time: new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000), // 2天前
                    unLook: false,
                },
                {
                    id: 3,
                    title: '积分消息',
                    content: '您的生活积分将于×天后失效,请尽快兑换',
                    time: new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000), // 2天前
                    unLook: false,
                },
                {
                    id: 4,
                    title: '订单通知',
                    content: '您的上门维修订单师傅已经完成,请尽快...',
                    time: new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000), // 2天前
                    unLook: false,
                },
                {
                    id: 5,
                    title: '审核通知',
                    content: '您的商家入驻申请已通过,请尽快下载...',
                    time: new Date(now.getTime() - 45 * 1000), // 45秒前
                    unLook: false,
                }
            ]
        },
        formatTime(time) {
            const now = new Date()
            const diff = now.getTime() - time.getTime()

            // 小于1分钟
            if (diff < 60 * 1000) {
                return '刚刚'
            }

            // 小于1小时
            if (diff < 60 * 60 * 1000) {
                const minutes = Math.floor(diff / (60 * 1000))
                return `${minutes}分钟前`
            }

            // 小于24小时
            if (diff < 24 * 60 * 60 * 1000) {
                const hours = Math.floor(diff / (60 * 60 * 1000))
                return `${hours}小时前`
            }

            // 超过24小时，显示日期
            const year = time.getFullYear()
            const month = String(time.getMonth() + 1).padStart(2, '0')
            const day = String(time.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },
        goToDetail(item) {
            console.log('查看详情:', item)
            if (this.id == 1 || this.id == 5) {
                uni.navigateTo({ url: `/views/index/news-detail?type=${item.id}&id=${item.id}` })
            }
            // 跳转到详情页
            // uni.navigateTo({ url: `/views/index/news-detail?id=${item.id}` })
        },
        onRefresh() {
            this.refreshing = true
            setTimeout(() => {
                this.page = 1
                this.loadData()
                this.refreshing = false
            }, 1000)
        },
        onLoadMore() {
            if (this.loading) return
            this.loading = true
            setTimeout(() => {
                // 模拟加载更多数据
                const moreData = (this.id == '4' ? this.getOrderData() : this.getMockData()).map(item => ({
                    ...item,
                    id: item.id + this.list.length
                }))
                this.list = this.list.concat(moreData)
                this.loading = false
            }, 800)
        }
    }
}
</script>

<style lang="scss" scoped>
.news-con {
    width: 100%;
    height: 100%;
    background: #F6F6F6;
}

.list-wrap {
    padding: 24rpx;
}

.notification-card {
    background: #fff;
    border-radius: 20rpx;
    padding: 28rpx;
    margin-bottom: 28rpx;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.notification-card.order {
    padding: 20rpx;
}

.card-icon {
    display: block;
    width: 8rpx;
    height: 8rpx;
    background: #FF4141;
    border-radius: 50%;
    margin-right: 20rpx;
    margin-top: 40rpx;
    opacity: 0;

    &.show {
        opacity: 1;
    }
}

.card-content {
    flex: 1;
    min-width: 0;
}

.card-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 8rpx;
}

.card-desc {
    font-size: 24rpx;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.card-time {
    font-size: 20rpx;
    color: #999;
    margin-left: 16rpx;
    flex-shrink: 0;
    white-space: nowrap;
}

.order-box {
    flex: 1;
    min-width: 0;
}

.order-header {
    margin-bottom: 12rpx;
}

.order-title {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
}

.order-date {
    font-size: 20rpx;
    color: #999;
    margin: 12rpx 0 24rpx;
}

.order-body {
    display: flex;
    gap: 16rpx;
}

.order-thumb {
    border-radius: 12rpx;
    overflow: hidden;
}

.order-desc {
    flex: 1;
    min-width: 0;
    font-size: 24rpx;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16rpx;
    gap: 6rpx;
}

.order-link {
    color: #2E8AE6;
    font-size: 24rpx;
}

.load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24rpx;
}

.load-text {
    margin-left: 8rpx;
    color: #999;
    font-size: 24rpx;
}

.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48rpx 0;
}

.empty-text {
    color: #999;
    font-size: 26rpx;
}
</style>